<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, onMounted, nextTick, watch, computed } from "vue";
import * as echarts from "echarts";
import {
  getEvaluationResultById,
  addComment,
  getCommentListById,
} from "@/apis";
import { useUserStore } from "@/store";

const props = defineProps({
  evaId: {
    type: String,
    default: "",
    required: false,
  },
});

interface CommentObjType {
  message: string;
  name: string;
  isExpert: boolean;
}

const inputComment = ref("");

const loading = ref(true);

const pieChartRef = ref(null);
const valueList = ref<number[]>([]);
const postListData = ref<CommentObjType[]>([]);

const moreThan1 = ref(0);
const lessThan1 = ref(0);

const formatData = (row: any, column: any, cellValue: any) => {
  return parseFloat(cellValue).toFixed(2);
};

const moreThan1Percent = computed(() => {
  return (moreThan1.value / (moreThan1.value + lessThan1.value)) * 100 + "%";
});

const lessThan1Percent = computed(() => {
  return (lessThan1.value / (moreThan1.value + lessThan1.value)) * 100 + "%";
});

const userStore = useUserStore();

const options = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "得分区间分布",
      type: "pie",
      radius: "50%",
      data: [
        { value: 0, name: "<0.4" },
        { value: 0, name: "0.4-0.6" },
        { value: 0, name: "0.6-0.8" },
        { value: 0, name: "0.8-1.0" },
        { value: 0, name: ">=1.0" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

async function handleComment(evaluationID: string, inputComment: string) {
  console.log(`Evaluation ID: ${evaluationID}, Comment: ${inputComment}`);
  // 这里你可以将数据发送到服务器或执行其他操作
  await addComment(userStore.getUID, evaluationID, inputComment);
  ElMessage({
    message: "成功提交评论",
    type: "success",
  });
  await freshCommentsList();
}

const freshCommentsList = async () => {
  let commentListResponse = await getCommentListById(props.evaId);
  postListData.value = commentListResponse?.data?.post_list?.map(
    (postData: any) => {
      return {
        message: postData?.message,
        name: postData?.user_name,
        isExpert: postData?.user_state == 2,
      };
    },
  );
};

let myChart: any;

const table1Data = ref([]);

onMounted(async () => {
  try {
    let evaluationResult = await getEvaluationResultById(props.evaId);
    // console.log(evaluationResult.data);
    table1Data.value = evaluationResult.data?.eva_result?.evaluate_result;
    console.log(table1Data.value);

    valueList.value = table1Data.value.map(
      (itemData: any) => itemData?.benefit_score,
    );

    await nextTick();
    myChart = echarts.init(pieChartRef.value);
    myChart.setOption(options);
    updateChart();
    await freshCommentsList();
    // console.log(postListData.value);
  } catch (e) {
    console.log(e, props.evaId);
    // TODO: 错误处理
    ElMessage({
      message: "错误，请检查你的测评码",
      type: "error",
    });
  } finally {
    loading.value = false;
  }
});

function updateChart() {
  const seriesData = options.series[0].data;
  const intervals = ["<0.4", "0.4-0.6", "0.6-0.8", "0.8-1.0", ">=1.0"];
  let totalValues = 0;
  valueList.value.forEach((value) => {
    if (value >= 1) {
      moreThan1.value += 1;
    } else {
      lessThan1.value += 1;
    }
    const intervalIndex = intervals.findIndex((interval) => {
      if (value <= 0.4) return interval === "<0.4";
      if (value > 0.4 && value <= 0.6) return interval === "0.4-0.6";
      if (value > 0.6 && value <= 0.8) return interval === "0.6-0.8";
      if (value > 0.8 && value < 1.0) return interval === "0.8-1.0";
      return interval === ">=1.0";
    });
    if (intervalIndex !== -1) {
      seriesData[intervalIndex].value += 1;
      totalValues += 1;
    }
  });
  console.log(seriesData);
  seriesData.forEach((data, index) => {
    // @ts-ignore
    seriesData[index].label = {
      normal: {
        // formatter: `{b}: {c} (${((data.value / totalValues) * 100).toFixed(2)}%)`, // 格式化为区间名 + 数值 + 百分比
        formatter: `{b}: (${((data.value / totalValues) * 100).toFixed(2)}%)`, // 格式化为区间名  + 百分比
      },
    };
  });

  myChart.setOption({
    series: [
      {
        data: seriesData,
      },
    ],
  });
}

const tableHeaLabel = "温室气体排放量\n(kg CO2/t)";
</script>

<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(122, 122, 122, 0.8)"
  >
    <h1 class="center-align">评估结果分析报告 {{ evaId }}</h1>

    <div>
      <h3>一、结果解析</h3>
      <h4 class="main-text indent-text">
        污水厂减污降碳协同效益得分分布情况见下图，其中效益得分越大，表示该污水厂减污降碳协同效益越好。若效益得分＜1，表示该污水厂存在一定的改进空间，若效益得分≥1，表示该污水厂减污降碳协同效益相对较好，可以作为标杆供其他污水厂参考。结果表明，有{{
          lessThan1
        }}座污水厂效益得分＜1，占所有污水厂的{{
          lessThan1Percent
        }}，即相比于效益得分≥1的污水厂，这些污水厂当前投入的总投资和运行费用无法获得期望的处理效果，或者说在目前的处理效果下，存在着总投资、运行费用、污泥产量或温室气体排放量过多的现象，需要进行改进。另外{{
          moreThan1
        }}座污水厂效益得分≥1，说明这些水厂能够以较低的总投资和运行费用达到净水目的，同时污泥产量和温室气体排放量也不高。
      </h4>
      <div>
        <div ref="pieChartRef" style="width: 100%; height: 400px"></div>
      </div>
      <div class="table-container">
        <el-table :data="table1Data" style="width: 100%">
          <el-table-column
            prop="factory_name"
            label="工厂名称"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="total_invest_slack"
            label="总投资（元）"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="cost_index_slack"
            label="费用综合指数"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="total_emission_slack"
            label="减排综合指数"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="sludge_prod_slack"
            label="污泥产量（kg）"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="emission_reduction_index_slack"
            :label="tableHeaLabel"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="benefit_score"
            label="效益得分"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <!-- 可以添加更多列 -->
        </el-table>
      </div>

      <h3>二、对策建议</h3>
      <h4 class="main-text indent-text">
        以下是本系统针对各个指标给出的对策建议，用户可自行根据评估结果中的改进潜力情况，查看相应的对策建议。
      </h4>
      <h4 class="main-text">
        （1）总投资：制定合理的投资方案，减少水厂总投资。在扩建或新建集污水厂时，应当综合考虑厂址的选择、施工难度、占地面积、土地价格和材料价格等多种因素。对于厂址的选择应该选择地势较低且平坦的位置，方便污水利用重力流入水厂和降低施工难度；对占地面积应当考虑处理规模、构筑物容积和数量，选择合理的建筑面积，同时在条件允许的情况下预留扩建空间；土地价格和材料价格需要与土地拥有者和材料供应商进行协商，制定合理的价格。
      </h4>
      <h4 class="main-text">
        （2）费用综合指数：节能降耗，调控运行成本。费用综合指数主要由电费、药剂费、员工成本和其他费用组成。对于能耗成本，首先排查耗电量大的设备，避免存在设备选型过大、配置单一和恒速运行等配置不合理问题，选型过大会直接导致耗电量的增加，配置单一和恒速运行会导致水厂的灵活性差，不能根据进水水质水量的变化进行及时调整；其次考察泵送管路的合理性，优化泵送途径，根据水质水量的变化调节曝气系统曝气量；最后排查污泥运输系统，缩短运输距离或充分利用重力运输。对于药剂成本，通过自动控制实时调节药剂投加量，提高水厂的灵活性。对于员工成本，对各个员工的工作量进行校核，合理分配劳动力资源，必要时进行裁员，降低员工成本。对于其他费用，主要包括设备维修费和污泥处理处置费用，对设备进行日常的维护，减少设备发生故障的概率；调整工艺参数或采用产泥量低的净水技术，从源头上减少污泥量的产生，从而减少污泥处理处置费。
      </h4>
      <h4 class="main-text">
        （3）减排综合指数：优化工艺，加强运维，提升污水厂减污能力。更新设备和技术：更新现有设备或引入先进的污水处理技术，如生物处理、膜分离和化学处理等，以提高污染物的去除效率。优化处理工艺：根据实际情况对处理工艺进行优化，例如调整曝气系统的运行参数、改变生物接触器的运行方式等，以提高污水处理的效率和质量。加强运营和维护：确保污水处理设施的运营和维护工作得到充分的重视，定期检查设备，及时修复和更换老化或损坏的部件，保持设施的高效运转。加强监测和管理：建立健全的监测体系，对污水处理过程中的关键参数进行实时监测，及时发现问题并采取措施加以解决，同时加强管理，加强对污水排放的监管和管理，确保符合环保法规要求。
      </h4>
      <h4 class="main-text">
        （4）温室气体排放量：控制温室气体间接排放量，实现水厂低碳运行。温室气体排放量主要由间接排放贡献，影响间接排放量的因素主要是电耗和药耗。对于电耗，污水提升泵和曝气系统是电能消耗的主要环节。提升泵是污水提升系统的主要耗能设备，可通过减小污水提升高度来降低提升泵的能耗，如：采取管道淹没出流，改变出水方式降低水头损失，控制跌水高度等技术，以减小出口处水头损失，可有效降低污水提升高度，节约能耗；在运行管理上，通过水泵电机调速运行，扩大水泵的有效工作范围可解决水泵效率低下的问题；根据水厂内各个构筑物的布设情况，合理的选择废水输送路径，减少泵送距离，降低泵站电耗。对于曝气环节，在曝气设备选择的时候，要按照污水处理规模、处理工艺和污水的水质水量情况等作出科学的选择；在曝气设计的过程要注重定期进行冷凝水的排放，以避免因为空气管线积水而造成的空气管线阻力的增加；准确计算曝气量，在计算的时候，要根据处理工艺、污水的进水量和废水水质等要求，做好污水溶解氧水平的传氧效率因素分析，而并非是单一的使用汽水比做出估算；选择变频器可有效的改善交流电机的转速方式，运用变频器合理控制风机的具体流量，降低风机的能源消耗。对于药耗，实时监控废水pH的变化情况，及时调整pH调节剂的投加量，避免出现投加过量的情况；对格栅和过滤器进行合理的选型，提高其对悬浮物的拦截能力，从而减少进入沉淀池和气浮池的悬浮物，进而减少混凝剂的投加量；采用垃圾渗滤液、啤酒废水和白酒废水等高浓度有机废水代替甲醇、乙酸钠和葡萄糖等常规碳源，减少污水厂对碳源的需求。
      </h4>
      <h4 class="main-text">
        （5）污泥产量：细分污泥来源，精确调控污泥产量。将污泥的来源进行细致的划分，精确到各个构筑物。格栅通常作为污水厂去除污水中悬浮物的第一道工序，因此应该根据废水中颗粒尺寸的大小对格栅进行合理选型，并注重设备日常的运行维护，从而减少进入初淀池的悬浮物，在一定程度上降低药剂的投加量，减少污泥产量。污水厂在工艺的选择上可能会用到沉淀池、气浮池、MBR膜池和芬顿池等工艺，记录各个产泥构筑物每天外排的污泥量，结合进水悬浮物和有机物浓度，对比各污水厂之间相同构筑物的产泥量，从而对产泥量大的构筑物进行调整。此外，建议将化学污泥和生化污泥分置处理，便于污泥的资源化利用。
      </h4>
      <h5 class="center-align">附录</h5>
      <h4 class="center-align">输入超效率SBM模型的数据</h4>
      <div class="table-container">
        <el-table :data="table1Data" style="width: 100%">
          <el-table-column
            prop="factory_name"
            label="工厂名称"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="total_invest_input"
            label="总投资（元）"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="cost_index_input"
            label="费用综合指数"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="total_emission_input"
            label="减排综合指数"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="sludge_prod_input"
            label="污泥产量（kg）"
            width="180"
            :formatter="formatData"
          ></el-table-column>
          <el-table-column
            prop="emission_reduction_index_input"
            label="温室气体排放量 （kg CO2/t）"
            width="180"
            :formatter="formatData"
          ></el-table-column>
        </el-table>
      </div>

      <br />

      <div>
        <div>
          <div class="center-align">留言区</div>
          <br />
        </div>
        <div>
          <div>
            <div v-for="postData in postListData">
              <h4>
                {{ postData.isExpert ? "（专家）" : "" }}{{ postData.name }}：{{
                  postData.message
                }}
              </h4>
            </div>
          </div>
        </div>
        <div class="footer-container">
          <el-input
            v-model="inputComment"
            placeholder="我也说几句..."
            class="input-comment"
          ></el-input>
          <el-button
            type="primary"
            @click="handleComment(props.evaId, inputComment)"
            >提交评论
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.center-align {
  text-align: center;
}

.indent-text {
  text-indent: 2em; /* 使用em单位，通常等于当前字体大小的两倍，适应不同字体大小 */
}

.main-text {
  font-size: 1.3em;
  line-height: 150%;
}

.footer-container {
  display: flex;
  align-items: center; /* 确保输入框和按钮垂直居中 */
}

.table-container {
  width: fit-content; /* 使容器宽度适应表格宽度 */
  margin: 0 auto; /* 水平居中 */
}
</style>
